About
Embedding Guide
API Reference
Source Code

API Functions and Classes

Instantiation function


Syntax

$(element).console(options)


element
:
Can either be:
• A html element
• A css selector of the elements to be effected
• A string of html. E.G. "<div></div>"
See jQuery documentation

options
:
A JavaScript object containing options which control how the console looks and behaves. See List of console options.


Return value

An instance of the
Console
class.


Description

This function converts the element provided into a console and returns an instance of the
Console
class. The console is instantiated with a set of options provided by the developer. These options effect how the console looks and how it acts. A full list of options is available below.
When a console has already been initialised on the element provided, the function will return the current instance of the console instantiated on this element. You can also retrieve the instantiated object by accessing the console property of the html element itself. E.G.
$(el).console(); //console setup on the element 'el'
var cons = el.console; //console access

List of console options


theme

Example
"monokai"
Description
A string specifying an ace theme, list of possible themes: github.

style

Example
"dark"
Description
Either "light" or "dark" which adds some colors that couldn't be found in the ace theme.


mode

Example
"javacript"
Description
A string specifying an ace language mode, list of possible modes: github.


showIcons

Example
true
Description
A boolean determining whether icons should be shown in the left area for special outputs like errors.


onInput

Example
function(text){
return canceled;
}
Description
The callback function to be passed as an argument to the onInput() method of the Console class.


onElementRemove

Example
function(obj){
return canceled;
}
Description
The callback function to be passed as an argument to the onElementRemove() method of the Console class.


onRightClick

Example
function(obj){}
Description
The callback function to be passed as an argument to the onRightClick() method of the Console class.


onTerminate

Example
function(){
return terminated;
}
Description
The callback function to be passed as an argument to the onTerminate() method of the Console class.


onWorkerMessage

Example
function(event, data){}
Description
-jsConsole only
The callback function to be passed as an argument to the onWorkerMessage() method of the Console class.


worker

Example
"worker.js"
Description
-jsConsole only
A string linking to the location where the code for your worker is held.


forwardOutput

Example
"error,warn"
Description
-jsConsole only
The forwardOutput property allows you to dump error/warning/informational data to the browser's console as well as the console implemented by Console.js. forwardOutput is to contain a comma delimited string of message types to forward to the browser's console. Alternatively, if set to true all messages will be forwarded to the browser's console. Similarly if set to false, none are.


Console
class



Properties

inputEditor

The ace editor object for the input element.
con.inputEditor.setValue("console.log('hello world')")

element

The html element containing the console.

maxHistoryLength

The maximum number of inputs the user can make before old history is deleted.

maxLogLength

The maximum number of elements within the console's visible history, before elements are removed.

showIcons

When this property is set to true, console.info(), console.warn() and console.error() will display an icon next to the outputted text.

inputs

A history of all strings, elements and other linked data inputted by the user into the console.

outputs

A history of all strings, elements and other linked data outputted by the console.

elementLog

A combination of inputs and outputs.

data

The data which was used to initialise the console. E.G. Ace mode, Console style etc.

Events


All events and listeners can be found in the listeners object in the console class. Each property of the listeners object is an array of functions which can be used to listen to specific events used by the console.

To add a listener, we advise you use one of the specialised functions below.

on()

Parameters
type, callback, remove
type
The name of the event to listen to. E.G. "input", "rightClick", ...
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
A dynamic alias for all of the below functions.

onInput()

Parameters
callback, remove
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
Listen to the event fired when a user inputs some data into the console. The callback should return a boolean, indicating if the input was handled. If false is returned, the user's input text won't be cleared, and won't be added to the inputs nor elementLog. The callback will be called with the data the user inputted. For example:

con.onInput(function(text){
this.log(text);
return true;
})

onRightClick()

Parameters
callback, remove
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
Creates a listener which fires when a user right clicks on a logged object. The callback is called with the clicked object data as an argument, this object data is the container for the clicked object, the element showing the object and some additional data.
con.onRightClick(function(obj){
this.log(obj);
});

onTerminate()

Parameters
callback, remove
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
Creates a listener which fires when the console terminates.
If the callback returns true, indicating that termination was successfull, a message will be shown in the console.

onElementRemove()

Parameters
callback, remove
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
Creates a listener which fires when an element is removed from the console.
The callback is called with the same data as is stored in the elementLog, which also contains the actual element. If the callback returns true, the removal of the element is cancelled. This does mean that any prior elements can't automatically be removed either however, so it is not recommeneded to return true unless you know what you are doing.
con.onElementRemove(function(removedElementData){
this.log(removedElementData)
})

Methods



log()

Parameters
obj1,obj2,obj3,...
A list of JavaScript objects/strings to output. The string representations of each of these objects are appended together in the order listed and outputted. Please be warned that if you log objects using the JavaScript extension provided the value of the object at that moment will be logged.

When making your own extensions this behaviour can be altered by logging a Proxy object which will get the values whenever a branch is opened in the console.
Description
This method tries to emulate the log functionality of the chrome console. However as of writing this, not all functionalities have been implemented. Known examples are listed below:
• String substitution is not yet implemented.
• Color formatting with "%c" is not yet implemented.

If the same object is logged multiple times in a row, then the that object is "stacked" displaying a count next to the message, representing the number of times log was called for that specific object. E.G. Running the following JavaScript:

var con = $('.console').console()
con.clear()
for(var i=0;i<4;i++){
con.log("stuff")
}


Will display the following:

For an explanation of logging behaviours, see $print().

info()

Parameters
obj1,obj2,obj3,...
A list of JavaScript objects/strings to output.
Description
Outputs an informational message to the console. A small "i" icon is displayed next to these items and the item is also displayed with a blue background.
For an explanation of logging behaviours, see $print().
Example
var con = $('.console').console()
con.clear()
con.info("Some useful info.")
Preview

warn()

Parameters
obj1,obj2,obj3,...
A list of JavaScript objects to output.
Description
Outputs a warning message to the console. A small warning icon is displayed next to these items and the item is also displayed with a yellow background.
For an explanation of logging behaviours, see $print().
Example
var con = $('.console').console()
con.clear()
con.warn("Some useful warning.")
Preview

error()

Parameters
obj1,obj2,obj3,...
A list of JavaScript objects to output.
Description
Outputs an informational message to the console. A small error icon is displayed next to these items and the item is also displayed with a red background.
For an explanation of logging behaviours, see $print().
Example
var con = $('.console').console()
con.clear()
con.error("Some error.")
Preview

output()

Parameters
obj1,obj2,obj3,...
A list of JavaScript objects/strings to output.
Description
Outputs a object or message to the console. Includes the "<" sign at the beginning of the line, indicating that this data has been outputted by the console itself.

For an explanation of logging behaviours, see $print().

clear()

Parameters
None
Description
Clears the console.
If called from the JavaScript extension then an informational message "Console was cleared" will be logged to the console afterwards.

input()

Parameters
text
The text that will be added as an input in the log.
Description
Shows input text highlighted in the selected language, in the console with an arrow to the right in front of it.

time()

Parameters
label
The name to give the new timer. This will identify the timer; use the same name when calling console.timeEnd() to stop the timer and output the time to the console.
Description
Starts a timer you can use to track how long an operation takes. You give each timer a unique name. When you call console.timeEnd() with the same name, the console will output the time, in milliseconds, that elapsed since the timer was started.

timeEnd()

Parameters
label
The name of the timer to stop. Once stopped, the elapsed time is automatically displayed in the console.
Description
Stops a timer that was previously started by calling console.time().

$print()

Parameters
class,obj1,obj2,obj3,...
class:
The class parameter is a
String
representing the html class name that will be added to the printed element. The class will also be found in the 'type' property of the object stored in the elementLog
obj1,obj2,obj3,...:
A list of JavaScript objects/strings to output

Description
Will display the provided objects in the console. Objects and Arrays printed to the console will become expandable in the console in a similar way to how they are expandable in the chrome's console. Error objects will also be expandable, however these won't show their properties but a formatted stack trace instead. There are also a couple of special object types that can be passed for special behavior:
• PlainText:
Will be displayed as plain text without quotation marks or a special text color.
• LineNumber:
Will be displayed in the right handside of the log as the origin of the message.
• HtmlElement:
Will be displayed as a real html element rather than an expandable object.
A detailed definition of these classes will be provided below. See Logging classes. Any function output text to the console other than 'input' forwards its data to this function. The class parameter is what will define the styling of the displayed data.

$handleInput()

Parameters
force
Boolean - If set to true, the text is handled even if the onInput() method told it to be ignored.
Description
Takes the text inputted by the user and sends it to the onInput() method. This will also clear the inputEditor, call the input() method, and add the inputted text to the inputs array.

$prevHistory()

Parameters
None
Description
Sets the inputEditor text to the previously most recent typed input into the console.

$nextHistory()

Parameters
None
Description
Sets the inputEditor text to the next most recently typed input into the console.

$addDivider()

Parameters
element
Element to add the dividers to.
Description
Adds a divider at the top and bottom of a passed element if needed. Will always add a divider on the bottom. It will add a divider on the top also, unless the previous line was an input.

$getLastPrint()

Parameters
None.
Description
Gets the last element from the elementLog.

$makeStringsPlain()

Parameters
list
The list of objects/strings to turn into plain text.

Description

Goes through a list of items, and will wrap all strings in the PlainText object, so that it will be logged as unformatted text.

$trigger()

Parameters
event
A console event to be fired.
Description
Fires an event defined in Console.Events.

$removeElement()

Parameters
element
The element to remove.
Description
Removes an element from the console's elementLog, inputs or outputs property, and disposes of all the connected data properly. If a parameter is not given, then the console is cleaned till the
maxHistoryLength
is reached. E.G. If you change
maxHistoryLength
to 40 from 100, the console will not remove any messages till the user inputs a new message, or till
$removeElement()
is called.

$removeHistory()

Parameters
element
Description
Remove an element from the console's inputs property, this means that the corresponding text can no longer be reached by using up and down arrow keys in the console. This function does NOT remove the element from the elementLog

JavaScript Extension

Show extra fieds and properties that are added by the JavaScript extension

Properties

worker

The actual worker object executing code.

workerFile

The file that the worker was created from, call setupWorker() in order to update the actual worker.

Events

onWorkerMessage()

Parameters
callback, remove
callback
The function to call when an event is fired.
remove
If this is set to true then the listener is removed, instead of added.
Description
Listen for any events fired from the worker object. The callback will receive the same arguments as the worker.onmessage usually receives. Do not define worker.onmessage directly.
con.onInput(function(text){
this.log(text);
return true;
})

Methods

setForwardOutput()

Parameters
forwardTypes
The types of console outputs that should be forwarded to the real console.
Can be either true or false to forward all or none of the messages, or a list of strings with the names of messages to forward, E.G.
["warn", "error"]
.
Description
Forwards the data logged to the console to the browser console as well. The line numbers will unfortunately get messed up a bit in the browser console due to an issue with eval().

setupWorker()

Parameters
workerFile
If provided, the workerFile will be set to this file. If left out, the already defined workerFile will be used. You can easily extend the JavaScript console with pre-defined methods using this file.
Description
Calls terminateWorker if the current worker is still running, and initialises a new worker.

terminateWorker()

Parameters
none
Description
Stops the currently running worker from executing its code.

Logging classes

PlainText
class

Description

Turns a string into a plainText object, indicating that it should not receive any additional formatting/styling when outputed using $print().

Constructor

Parameters
text
The text to turn into plain text.

Properties

text
The string inputted.
element
The literal element that will outputted by $print().

LineNumber
class

Description

Creates a line number element that can be outputted by $print(). Should be the first of the output elements passed to $print() for the best allignment.

Constructor

Parameters
file
The file name to be shown.
lineNumber
The line number to be shown.
trace
An error trace to construct the lineNumber from.

Description

Either a combination of file and lineNumber should be provided, a trace should be provided, or file should be a number indicating the offset in the function stack trace, see the provided examles.

Examples

file lineNumber combination
var cons = $(".console").console();
cons.log("text", new cons.LineNumber("fileName", 18));
trace
When called from test.js:
var cons = $(".console").console();
var trace = new Error("test").stack;
cons.log("text", new cons.LineNumber(null, null, trace));
We get a response like this:
automatic trace
When called from test.js:
var cons = $(".console").console();
function a(){
cons.log("text", new cons.LineNumber(1));
}
function b(){
cons.log("text", new cons.LineNumber(2));
}
a();
b();
We get a response like: The number indicates what line of the error stack trace to use. The error of the stack trace in function a will have looked like this:
Error
at new Console.LineNumber (console.js:763)
at a (test.js:3)
at test.js:8

Properties

file
The file name where the notification was raised.
lineNumber
The lineNumber where the notification was raised.
element
The literal element that will be printed by $print().

HtmlElement
class

Description

If an element object is passed into $print() directly, it is displayed as an object. This class allows developers to change this behavior and print a html element to the console instead. This brings an element of interactivity to the console, which is previously missing.

Constructor

Parameters
element
The element to be logged.

Example

var cons = $(".console").console();
cons.log(new cons.HtmlElement($("<div style=background-color:lime>some text</div>")[0]));

As you may have guessed you can also implement interactive elements! For example:
window.cons = $(".console").console();
cons.log("Are you happy?");
cons.log(
new cons.HtmlElement($(`<button>Yes</button>`).click(function(){
window.cons.log("Celebrate good times!");
})),
new cons.HtmlElement($(`<button>No</button> `).click(function(){
window.cons.log("Aww... Hugs!");
}))
);

Properties

element
The literal element that will displayed using $print().
Page has been last updated on: 20 Jan 2018
Contents
API Functions and Classes
Instantiation function
List of console options
theme
style
mode
showIcons
onInput
onElementRemove
onRightClick
onTerminate
onWorkerMessage
worker
forwardOutput
Console
class
Properties
inputEditor
element
maxHistoryLength
maxLogLength
showIcons
inputs
outputs
elementLog
data
Events
on()
onInput()
onRightClick()
onTerminate()
onElementRemove()
Methods
log()
info()
warn()
error()
output()
clear()
input()
time()
timeEnd()
$print()
$handleInput()
$prevHistory()
$nextHistory()
$addDivider()
$getLastPrint()
$makeStringsPlain()
$trigger()
$removeElement()
$removeHistory()
JavaScript Extension
Properties
worker
workerFile
Events
onWorkerMessage()
Methods
setForwardOutput()
setupWorker()
terminateWorker()
Logging classes
PlainText
class
Properties
text
element
LineNumber
class
Properties
file
lineNumber
element
HtmlElement
class
Properties
element